const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const path = require('path')

module.exports = env => {
    const isDev = (env === 'development')
    const config = {
        mode: 'none',
        entry: './src/main.js',
        output: {
            filename: '[name].[hash:8].js'
        },
        resolve: {
            alias: {
                // 代表代码文件根目录  如要引入src/helloword   就可以@/components/helloword，不用管当前文件的所在位置
                // 当文件层级比较深是非常有用
                '@': path.resolve(__dirname, 'src/'),
            },
            // 自动解析确定的扩展  配置后我们引入.js .vue .json文件时就可以省略后缀名了
            extensions: [".js", ".json", '.vue']
        },
        module: {
            rules: [{
                    test: /\.css$/,
                    use: [
                        isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                esModule: false
                            }
                        },
                        'postcss-loader'
                    ]
                }, {
                    test: /\.less$/,
                    use: [
                        isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                esModule: false
                            }
                        },
                        'postcss-loader',
                        'less-loader'
                    ]
                }, {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        },

                    },
                    exclude: file => (
                        /node_modules/.test(file) &&
                        !/\.vue\.js/.test(file)
                    )
                },
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.(png|jpe?g|gif|webp)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            esModule: false,
                            name: 'img/[name].[contenthash:8].png'
                        }
                    }
                },
                // 在其他编译之前就进行代码校验
                {
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /node_modules/,
                    options: {
                        // 自动修复 eslint 错误
                        fix: true
                    }
                }
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new HtmlWebpackPlugin({
                template: './public/index.html',
                title: 'webpack'
            }),
            new webpack.DefinePlugin({
                BASE_URL: JSON.stringify('./') //这里字符串内容需要转义，不然会就会当成一个变量
            }),
            new StyleLintPlugin({
                files: ['src/**/*.{vue,css,less}']
            })
        ]
    }
    // 开发环境不必提取css
    if (!isDev) {
        config.plugins.push(new MiniCssExtractPlugin({
            filename: 'css/[contenthash:8].css'
        }))
    }
    return config
}